.SetSystem {
    width: 100%;
    height: 100%;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    &>div {
        height: 100%;

        &.Left {
            width: 120px;
            padding-right: 16px;
            border-right: 1px dashed rgba(145, 158, 171, 0.2);
            position: relative;
            z-index: 1;

            &>.Nav {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                height: 48px;
                font-family: ShuHeiTi;
                font-weight: 600;
                font-size: 16px;
                color: #949494;
                cursor: pointer;
                transition: all 0.35s;
                position: relative;
                z-index: 1;
                user-select: none;

                &.active {
                    color: #262626;
                }
            }

            &>.indicator {
                position: absolute;
                z-index: 1;
                width: 4px;
                top: 12px;
                right: 6px;
                height: 24px;
                border-radius: 50px;
                transition: all 0.35s;
            }

            &>.Submit {
                position: absolute;
                left: 0;
                right: 24px;
                bottom: 0;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        &.Right {
            flex: 1;
            padding-left: 16px;
            overflow: hidden;

            &>.swiper {
                width: 100%;
                height: 100%;
                overflow: hidden;

                &>.swiper-wrapper {
                    &>.swiper-slide {
                        &>div {
                            width: 100%;
                            height: 100%;
                            overflow: hidden;
                            background: #f5f5f5;
                            padding: 8px;
                            border-radius: 8px;
                            display: flex;
                            align-items: flex-start;
                            justify-content: flex-start;
                            flex-direction: column;


                            &>div {
                                width: 100%;

                                &.ant-divider {
                                    font-family: ShuHeiTi;
                                    font-weight: bold;
                                    font-size: 24px;
                                    color: #262626;
                                }

                                &.Content {
                                    flex: 1;
                                    overflow-y: scroll;

                                    &::-webkit-scrollbar {
                                        display: none;
                                    }
                                }
                            }
                        }

                        .Label {
                            position: relative;
                            z-index: 1;
                            margin-top: 16px;
                            width: 100%;

                            &>div:first-child {
                                position: absolute;
                                z-index: 2;
                                left: 8px;
                                top: -12px;
                                padding: 2px 4px;
                                border-radius: 4px;
                                font-family: ShuHeiTi;
                                font-size: 16px;
                                font-weight: bold;
                                color: #262626;
                                background: rgba(255, 255, 255, 0.15);
                                backdrop-filter: blur(8px);
                            }

                            &>*:last-child {
                                width: 100%;
                                height: 64px;
                            }

                            .ant-input-number,
                            .ant-picker,
                            .ant-color-picker-trigger,
                            .ant-color-picker-clear::after {
                                width: 100%;
                            }

                            .ant-input-affix-wrapper,
                            .ant-input-outlined,
                            .ant-select-single,
                            .ant-input-number-input,
                            .ant-picker,
                            .ant-color-picker-trigger {
                                height: 64px;
                            }


                            .ant-color-picker-color-block,
                            .ant-color-picker-clear {
                                width: 100%;
                                height: 100%;
                            }

                            .ant-form-item-row {
                                position: relative;
                                z-index: 1;
                            }

                            input,
                            textarea,
                            .ant-input,
                            .ant-select-selector,
                            .ant-picker-suffix,
                            .ant-input-suffix,
                            .ant-select-arrow {
                                font-size: 20px;
                            }

                            .ant-radio-group {
                                display: flex;
                                align-items: center;
                                justify-content: center;

                                &>label {
                                    flex: 1;
                                    height: 100%;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    font-size: 20px;
                                    font-weight: 600;
                                }
                            }

                        }



                    }
                }
            }

            .SetSystemCONFIG {
                .Content {
                    &>.Title {
                        text-indent: 16px;
                        font-family: ShuHeiTi;
                        font-weight: bold;
                        font-size: 20px;
                        color: #082400;
                    }

                    &>.SelectBox {
                        display: flex;
                        align-items: flex-start;
                        justify-content: flex-start;
                        flex-wrap: wrap;

                        &>div {
                            width: calc(20% - 8px);
                            height: 48px;
                            border-radius: 8px;
                            box-shadow: var(--shadow-1-down);
                            margin: 4px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            cursor: pointer;
                            user-select: none;
                            font-family: ShuHeiTi;
                            font-size: 18px;
                            color: #082400;
                            transition: all 0.35s;
                            background: #fff;
                            text-shadow: none;

                            &.active {
                                background: linear-gradient(45deg, #262626, #f9f9f9);
                                color: white;
                                text-shadow: 0 0 8px #262626;
                            }
                        }
                    }
                }
            }

            .SetSystemTHEME {
                &>.simulationTheme {
                    flex: 1;
                    background: #fff;
                    border-radius: 8px;
                    position: relative;
                    z-index: 1;
                    overflow: hidden;

                    &>div {
                        position: absolute;
                        top: 16px;
                        width: 240px;
                        height: calc(100% - 32px);
                        overflow: hidden;
                        display: flex;
                        align-items: flex-start;
                        justify-content: flex-start;
                        flex-direction: column;
                        z-index: 3;

                        &.Left {
                            left: 16px;
                        }

                        &.Right {
                            right: 16px;

                            &>.title {
                                width: 100%;
                                font-family: ShuHeiTi;
                                font-weight: bold;
                                font-size: 20px;
                                color: #262626;
                                text-align: center;
                                text-shadow: 0 0 8px #fff;
                            }
                        }

                        &.Mask {
                            left: 0;
                            top: 0;
                            width: 100%;
                            height: 100%;
                            border-radius: 8px;
                            z-index: 2;
                        }
                    }

                    &>.Image {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        border-radius: 8px;
                        z-index: 1;
                    }



                }
            }

            .SetSystemLOGO,
            .SetSystemMENU,
            .SetSystemTITLE,
            .SetSystemUSER,
            .SetSystemTABS,
            .SetSystemBODY {
                &>.Content {
                    display: flex;
                    align-items: flex-start;
                    justify-content: center;

                    &>div {
                        width: 30%;
                        padding: 0 2%;
                        height: 100%;

                        &:nth-child(2) {
                            border-left: 1px dashed #ccc;
                            border-right: 1px dashed #ccc;
                        }

                        &>.title {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-family: ShuHeiTi;
                            font-weight: bold;
                            font-size: 20px;
                            color: #262626;
                        }
                    }

                    .listTitle {
                        font-family: ShuHeiTi;
                        font-size: 16px;
                        font-weight: bold;
                        color: #262626;
                        padding-top: 16px;
                    }

                    .userNavList {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-wrap: wrap;
                        padding: 16px;

                        &>.ant-tag {
                            font-size: 16px;
                            padding: 4px 8px;
                            margin-bottom: 8px;
                        }
                    }
                }
            }

            .SetSystemOPTIONS {
                display: flex;
                align-items: flex-start;
                justify-content: flex-start;
                flex-direction: column;

                &>.title {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-family: ShuHeiTi;
                    font-weight: bold;
                    font-size: 20px;
                    color: #262626;
                }

                &>.OptionsList {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-wrap: wrap;
                    padding: 16px;

                    &>.ant-tag {
                        font-size: 16px;
                        padding: 4px 8px;
                        margin-bottom: 8px;
                    }
                }

                &>.setUp {
                    width: 100%;
                    flex: 1;
                    display: flex;
                    align-items: flex-start;
                    justify-content: center;

                    &>div {
                        width: 35%;
                        padding: 0 2%;
                        height: 100%;


                        &:nth-child(2) {
                            border-left: 1px dashed #ccc;
                            border-right: 1px dashed #ccc;
                        }

                        &>.title {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-family: ShuHeiTi;
                            font-weight: bold;
                            font-size: 20px;
                            color: #262626;
                        }
                    }



                }
            }

        }
    }

}